<template>
  <div class="videoDetail_box" element-loading-background="rgba(0, 0, 0, 0.7)"
       element-loading-spinner="el-icon-loading" element-loading-text="截图准备中..." v-loading="isImgLoding">
    <div class="videoDetail">
      <!-- <el-breadcrumb separator="/" style="padding:10px;">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="#/monitoringanalysis">监控分析</a></el-breadcrumb-item>
    <el-breadcrumb-item><a href="#/vedioanalysis">视频分析</a></el-breadcrumb-item>
  </el-breadcrumb> -->
      <IdxLayout :video-play-start-time.sync="videoPlayStartTime" @allLog="allLog"
                 :openWholeRecord="openWholeRecord"
                 :form="Object.values(this.idxList)[0]?Object.values(this.idxList)[0]:{}">
        <div class="vedio-box">
          <el-row class="box-content">
            <el-col :span="12" style="height: 100%; border: 1px solid rgb(228, 231, 237);"
                    v-if="openWholeRecord">
              <div style="height: 100%;" element-loading-background="rgba(0, 0, 0, 0.7)"
                   element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中..."
                   v-loading="lkjloading">
                <!--打开全程记录列表-->
                <LkjItemTable :list="lkjCharts" :items="lkjitems" :total="total" :pageNum="pageNum"
                              :pageSize="pageSize" :current-time="progressValue" :lkj="recordId"
                              @handleNextName="handleNextName" @allLogChart="allLogChart"
                              @cellDblclick="cellDblclick" @change-played-time="changePlayCurrentTime"
                              @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
                              element-loading-text="拼命加载中"/>
              </div>
            </el-col>
            <el-col :span="openWholeRecord ? 12 : 14" class="video-content">
              <div class="video-main" :class="layoutIndex==4?'heght4':layoutIndex==1?'heght4':''"
                   element-loading-background="rgba(0, 0, 0, 0.7)"
                   element-loading-spinner="el-icon-loading" element-loading-text="正在同步视频缓存..."
                   v-loading="loading">
                <el-row v-if="currentVideos.length == 1"
                        style="height: 100%;padding: 5px;box-sizing: border-box;">
                  <el-col :span="24" v-for="(item,index) in currentVideos" :key="index"
                          style="height: 100%;">
                    <div style="position: relative;height:100%;" :id="'myVideo'+index">
                      <video ref="video" class="contextmenuVideo" crossorigin="anonymous"
                             :src="item.videoUrl" @pause="pause" @loadstart="loadstart"
                             @timeupdate="timeupdate" @ended="ended" autoplay preload="auto"
                             style="width: 100%;height: 100%;object-fit: fill;">
                        <source :src="item.videoUrl" type="video/mp4">
                        Your browser does not support the video tag.
                      </video>
                      <span class="title"
                            style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                          item.channelName
                        }}</span>
                    </div>
                    <div :id="'errorMessage'+index" class="error_msg">
                      没有信号
                      <span class="icon">x</span>
                    </div>
                  </el-col>
                </el-row>
                <!-- 2个视频 -->
                <el-row :gutter="5" v-if="currentVideos.length <= 2&&currentVideos.length>1"
                        style="height: 100%;">
                  <el-col :span="12" v-for="(item,index) in currentVideos" :key="index"
                          style="height: 100%;">
                    <div style="position: relative;height:100%;" :id="'myVideo'+index">
                      <video ref="video" :src="item.videoUrl" crossorigin="anonymous"
                             @pause="pause" @loadstart="loadstart" @timeupdate="timeupdate"
                             @ended="ended" autoplay preload="auto" @click="enlargeClick(index)"
                             style="width: 100%;height: 100%;object-fit: fill;">
                      </video>
                      <span class="title"
                            style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                          item.channelName
                        }}</span>
                    </div>
                    <div :id="'errorMessage'+index" class="error_msg">
                      没有信号
                      <span class="icon">x</span>
                    </div>
                  </el-col>
                </el-row>
                <!-- 4个视频 -->
                <div v-if="currentVideos.length > 2&&currentVideos.length <= 4" style="height: 100%;">
                  <el-row :gutter="5" style="height: 50%;margin-bottom: 5px;">
                    <template v-for="(item,index) in currentVideos">
                      <el-col :span="12" v-if="index<=1" :key="index" style="height: 100%;">
                        <div style="position: relative;height:100%;" :id="'myVideo'+index">
                          <video ref="video" crossorigin="anonymous" :src="item.videoUrl"
                                 @pause="pause" @loadstart="loadstart" @timeupdate="timeupdate"
                                 @ended="ended" autoplay preload="auto"
                                 @click="enlargeClick(index)"
                                 style="width: 100%;height: 100%;object-fit: fill;">
                          </video>
                          <span class="title"
                                style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                              item.channelName
                            }}</span>
                        </div>
                        <div :id="'errorMessage'+index" class="error_msg">
                          没有信号
                          <span class="icon">x</span>
                        </div>
                      </el-col>
                    </template>
                  </el-row>
                  <el-row :gutter="5" style="height: 50%;">
                    <template v-for="(item,index) in currentVideos">
                      <el-col :span="12" v-if="index>1&&index<=3" :key="index"
                              style="height: 100%;">
                        <div style="position: relative;height:100%;" :id="'myVideo'+index">
                          <video ref="video" :src="item.videoUrl" autoplay @pause="pause"
                                 @loadstart="loadstart" @timeupdate="timeupdate" @ended="ended"
                                 preload="auto" @click="enlargeClick(index)"
                                 style="width: 100%;height: 100%;object-fit: fill;">
                          </video>
                          <span class="title"
                                style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                              item.channelName
                            }}</span>
                        </div>
                        <div :id="'errorMessage'+index" class="error_msg">
                          没有信号
                          <span class="icon">x</span>
                        </div>
                      </el-col>
                    </template>
                  </el-row>
                </div>
                <!-- 8个视频 -->
                <div v-if="currentVideos.length>4&&currentVideos.length<9" class="eight_box"
                     style="height:100%;overflow-y: scroll;overflow-x:hidden">
                  <el-row :gutter="5" style="height:75%">
                    <template v-for="(item,index) in currentVideos">
                      <el-col :span="16" :key="index" v-if="index==0" class="aspect-ratio-16-9">
                        <div class="video_box">
                          <div class="video_item" :id="'myVideo'+index">
                            <video ref="video" crossorigin="anonymous" class="video_item"
                                   :id="'myVideoE'+index" :src="item.videoUrl" @pause="pause"
                                   @loadstart="loadstart" @timeupdate="timeupdate"
                                   @ended="ended" @click="enlargeClick(0)" autoplay
                                   preload="auto" v-if="item.videoUrl">
                              Your browser does not support the video tag.
                            </video>
                            <div class="no_data_item" v-else
                                 style="width: 100%;height: 100%;height: 100%;background: #ccc;color: #fff;display: flex;align-items: center;justify-content: center;">
                              暂无数据
                            </div>
                            <span class="title"
                                  style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                                item.channelName
                              }}</span>
                          </div>
                          <div :id="'errorMessage'+index" class="error_msg">
                            没有信号
                            <span class="icon">x</span>
                          </div>

                        </div>

                      </el-col>
                    </template>
                    <el-col :span="8" style="display:flex;flex-direction: column;height:100%">
                      <template v-for="(item,index) in currentVideos">
                        <div :key="index" class="aspect-ratio-16-9" v-if="index>0&&index<4">
                          <div class="video_box" style="margin-bottom: 1.5%;">
                            <div class="video_item" :id="'myVideo'+index">
                              <video ref="video" crossorigin="anonymous"
                                     class="video_item" :src="item.videoUrl"
                                     :id="'myVideoE'+index" @pause="pause"
                                     @loadstart="loadstart" @timeupdate="timeupdate"
                                     @ended="ended" autoplay @click="enlargeClick(index)"
                                     preload="auto" v-if="item.videoUrl">
                                Your browser does not support the video tag.
                              </video>
                              <div class="no_data_item" v-else style="">暂无数据</div>
                              <span class="title"
                                    style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                                  item.channelName
                                }}</span>
                            </div>
                            <div :id="'errorMessage'+index" class="error_msg">
                              没有信号
                              <span class="icon">x</span>
                            </div>
                          </div>
                        </div>
                      </template>
                    </el-col>
                  </el-row>
                  <el-row
                      style="width: 100%;margin: 0;margin-top:1%;height: 24%;display:flex;padding-left: 5px;box-sizing: border-box;">
                    <el-col :span="24" style="display:flex;height:100%">
                      <template v-for="(item,index) in currentVideos">
                        <div :key="index" class="aspect-ratio-16-9"
                             style="width:25%;padding-bottom:0%;" v-if="index>3&&index<8">
                          <div class="video_box" style="margin-bottom: 1.5%;">
                            <div class="video_item" :id="'myVideo'+index">
                              <video ref="video" crossorigin="anonymous"
                                     class="video_item" :src="item.videoUrl"
                                     :id="'myVideoE'+index" @pause="pause"
                                     @loadstart="loadstart" @timeupdate="timeupdate"
                                     @ended="ended" autoplay @click="enlargeClick(index)"
                                     preload="auto" v-if="item.videoUrl">
                                Your browser does not support the video tag.
                              </video>
                              <div class="no_data_item" v-else style="">暂无数据</div>
                              <span class="title"
                                    style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                                  item.channelName
                                }}</span>
                            </div>
                            <div :id="'errorMessage'+index" class="error_msg">
                              没有信号
                              <span class="icon">x</span>
                            </div>
                          </div>
                        </div>
                      </template>
                    </el-col>
                  </el-row>
                </div>
                <!-- 16个视频 -->
                <el-row :gutter="5" v-if="currentVideos.length>8&&currentVideos.length<17"
                        style="height:100%;">
                  <el-col :span="12" style="height:100%;padding:0;">
                    <div style="margin-right:3px;height: 66%;">
                      <template v-for="(item,index) in currentVideos">
                        <div style="position: relative;height:100%;" v-if="index==0"
                             :key="index">
                          <div :id="'myVideo'+index" style="width: 100%;height: 100%;">
                            <video ref="video" crossorigin="anonymous" :src="item.videoUrl"
                                   @pause="pause" @loadstart="loadstart"
                                   @timeupdate="timeupdate" @ended="ended" preload="auto"
                                   autoplay @click="enlargeClick(index)"
                                   style="width: 100%;height: 100%;object-fit: fill;"
                                   v-if="item.videoUrl">
                            </video>
                            <div v-else
                                 style="width: 100%;height: 100%;background: #ccc;color: #fff;display: flex;align-items: center;justify-content: center;margin-top:5px;">
                              暂无数据
                            </div>
                            <span class="title"
                                  style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                                item.channelName
                              }}</span>
                          </div>
                          <div :id="'errorMessage'+index" class="error_msg">
                            没有信号
                            <span class="icon">x</span>
                          </div>

                        </div>
                      </template>
                    </div>
                    <div style="display:flex;height:33%;margin-top:5px;">
                      <template v-for="(item,index) in currentVideos">
                        <div style="position: relative;height:100%;margin-right:3px;width: 33.33%;"
                             v-if="index>0&&index<4" :key="index">
                          <div :id="'myVideo'+index" style="width: 100%;height: 100%;">
                            <video ref="video" crossorigin="anonymous" :src="item.videoUrl"
                                   @pause="pause" @loadstart="loadstart"
                                   @timeupdate="timeupdate" @ended="ended" preload="auto"
                                   autoplay @click="enlargeClick(index)"
                                   style="width: 100%;height: 100%;object-fit: fill;"
                                   v-if="item.videoUrl">
                            </video>
                            <div v-else
                                 style="width: 100%;height: 100%;background: #ccc;color: #fff;display: flex;align-items: center;justify-content: center;margin-top:5px;">
                              暂无数据
                            </div>
                            <span class="title"
                                  style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                                item.channelName
                              }}</span>
                          </div>
                          <div :id="'errorMessage'+index" class="error_msg">
                            没有信号
                            <span class="icon">x</span>
                          </div>
                        </div>
                      </template>
                    </div>
                  </el-col>
                  <el-col :span="12" style="height:100%;">
                    <el-row :gutter="5" style="height:100%;">
                      <el-col :span="8" style="height:100%;">
                        <template v-for="(item,index) in currentVideos">
                          <div style="position: relative;height:25%;" v-if="index>3&&index<8"
                               :key="index">
                            <div :id="'myVideo'+index" style="width: 100%;height: 100%;">
                              <video ref="video" crossorigin="anonymous"
                                     :src="item.videoUrl" @pause="pause"
                                     @loadstart="loadstart" @timeupdate="timeupdate"
                                     @ended="ended" preload="auto" autoplay
                                     @click="enlargeClick(index)"
                                     style="width: 100%;height: 100%;object-fit: fill;"
                                     v-if="item.videoUrl">
                              </video>
                              <div v-else
                                   style="width: 100%;height: 100%;height: 98%;background: #ccc;color: #fff;display: flex;align-items: center;justify-content: center;margin-top:1%;">
                                暂无数据
                              </div>
                              <span class="title"
                                    style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                                  item.channelName
                                }}</span>
                            </div>
                            <div :id="'errorMessage'+index" class="error_msg">
                              没有信号
                              <span class="icon">x</span>
                            </div>
                          </div>
                        </template>
                      </el-col>
                      <el-col :span="8" style="height:100%;">
                        <template v-for="(item,index) in currentVideos">
                          <div style="position: relative;height:25%;" v-if="index>7&&index<12"
                               :key="index">
                            <div :id="'myVideo'+index" style="width: 100%;height: 100%;">
                              <video ref="video" crossorigin="anonymous"
                                     :src="item.videoUrl" @pause="pause"
                                     @loadstart="loadstart" @timeupdate="timeupdate"
                                     @ended="ended" preload="auto" autoplay
                                     @click="enlargeClick(index)"
                                     style="width: 100%;height: 100%;object-fit: fill;"
                                     v-if="item.videoUrl">
                              </video>
                              <div v-else
                                   style="width: 100%;height: 100%;height: 98%;background: #ccc;color: #fff;display: flex;align-items: center;justify-content: center;margin-top:1%;">
                                暂无数据
                              </div>
                              <span class="title"
                                    style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                                  item.channelName
                                }}</span>
                            </div>
                            <div :id="'errorMessage'+index" class="error_msg">
                              没有信号
                              <span class="icon">x</span>
                            </div>
                          </div>
                        </template>
                      </el-col>
                      <el-col :span="8" style="height:100%;">
                        <template v-for="(item,index) in currentVideos">
                          <div style="position: relative;height:25%;"
                               v-if="index>11&&index<16" :key="index">
                            <div :id="'myVideo'+index" style="width: 100%;height: 100%;">
                              <video ref="video" crossorigin="anonymous"
                                     :src="item.videoUrl" @pause="pause"
                                     @loadstart="loadstart" @timeupdate="timeupdate"
                                     @ended="ended" preload="auto" autoplay
                                     @click="enlargeClick(index)"
                                     style="width: 100%;height: 100%;object-fit: fill;"
                                     v-if="item.videoUrl">
                              </video>
                              <div v-else
                                   style="width: 100%;height: 100%;height: 98%;background: #ccc;color: #fff;display: flex;align-items: center;justify-content: center;margin-top:1%;">
                                暂无数据
                              </div>
                              <span class="title"
                                    style="position: absolute;right: 0;top: 0;color:#fff;font-weight: 700;">{{
                                  item.channelName
                                }}</span>
                            </div>
                            <div :id="'errorMessage'+index" class="error_msg">
                              没有信号
                              <span class="icon">x</span>
                            </div>
                          </div>
                        </template>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
              <!-- 视频控制按键 -->
              <div style="width:100%;height: 9%;position: relative;">
                <el-col :span="24" class="controls">
									<span class="btn">
										<i type="primary" class="el-icon-headset">
											音量
										</i>
										<el-slider style="padding-left: 10px;padding-right: 10px;"
                               @change="changeVolume" class="slider" v-model="volumeValue"/>
									</span>
                  <span style="margin-right: 7px;">
										<span style="margin: 0 8px 0 0; color: #ffffff; ">x{{ playbackRate }}</span>
										<el-button @click="changePlaybackRateIndex(-1)" type="primary"
                               icon="el-icon-d-arrow-left" size="mini" circle/>
										<el-button v-if="!playBtn" @click="changePlay" type="primary"
                               icon="el-icon-caret-right" size="small" circle/>
										<el-button v-else @click="changePlay" type="danger" icon="el-icon-switch-button"
                               size="small" circle/>
										<el-button @click="changePlaybackRateIndex(1)" type="primary"
                               icon="el-icon-d-arrow-right" size="mini" circle/>
									</span>
                  <span v-for="(val, key) in layouts" :key="key" @click="changeLayout(key)"
                        class="theme">
										<i :class="['el-icon-menu', key === layoutIndex ? 'active' : '']">
											{{ val }}
										</i>
									</span>
                  <span style="margin: 0 5px; ">
										<el-button @click="openComments" type="warning" size="mini" circle>
											签
										</el-button>
									</span>
                  <span class="screenshot" :class="layoutIndex==0?'red':''" @click="screenshotHandle"
                        v-if="this.currentVideos.length>0">截图</span>
                  <span class="screenshot" :class="layoutIndex==0?'red':''" @click="transcribe"
                        v-if="this.currentVideos.length>0&&layoutIndex==0">
										<i class="record-procees" v-if="isRecorder"></i>
										{{ transcribeStr }}
									</span>
                  <span style="margin-bottom: 15px;"
                        v-if="this.currentVideos.length>0&&layoutIndex!=0">
										<el-button @click="startRecording" :disabled="videoStart"
                               size="mini">开始录制</el-button>
										<el-button @click="stopRecording" :disabled="!videoStart" size="mini"
                               id="btn-stop-recording">结束录制</el-button>
									</span>
                </el-col>
                <el-col :span="24" class="controls" v-if="duration">
									<span style="display:flex; align-items: center">
										<span>{{ startT }}/{{ endT }}</span>
										<el-slider style="width:80%; padding-left: 30px;" :min="0" :max="duration"
                               :step="1000" show-tooltip :format-tooltip="formatTooltip"
                               v-model="progressValue" @input="isChange?inputProgress2:inputProgress3"
                               @change="inputProgress"/>
									</span>
                </el-col>
              </div>

              <el-col :span="24" :class="layoutIndex==4?'warning_heght':layoutIndex==1?'warning_heght':''"
                      class="warning" element-loading-background="rgba(0, 0, 0, 0.7)"
                      element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中..."
                      v-loading="idx.loading">
                <IdxChart ref="idxChart" :list="idxList" :duration="duration"
                          :openWholeRecord="openWholeRecord" :startT="startT" :progressValue="progressValue"
                          v-if="Object.keys(idxList).length>0" @clickIdxChart="clickIdxChart"
                          @clickIdxChartChange="clickIdxChartChange"/>
              </el-col>
            </el-col>
            <el-col :span="10" class="content-right" v-show="!openWholeRecord">
              <div class="table-one">
                <el-table :data="videoList" :row-class-name="tableRowClassName"
                          @current-change="changeMp4" border height="308" ref="selectMp4" size="mini"
                          element-loading-text="拼命加载中" v-loading="video.loading">
                  <el-table-column label="通道" prop="channelNum" show-overflow-tooltip width="50"/>
                  <el-table-column label="开始时间" prop="fileTime" show-overflow-tooltip width="140"/>
                  <el-table-column label="文件名" min-width="260">
                    <template slot-scope="scope">
                      <el-tooltip :content="scope.row.url" placement="top">
                        <div
                            style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ">
                          {{ scope.row.url }}
                        </div>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="table-two">
                <el-table :data="currentPhaseList" @cell-dblclick="pointCellDblclick"
                          highlight-current-row border height="208" ref="selectPhase" size="mini"
                          element-loading-text="拼命加载中" :row-class-name="tableRowClassName2"
                          v-loading="analysisPhases.loading">
                  <el-table-column label="项点名称" prop="name" show-overflow-tooltip min-width="100"/>
                  <el-table-column label="类别/并发" prop="code" show-overflow-tooltip width="80"/>
                  <el-table-column label="起止时间" prop="time" show-overflow-tooltip width="130"/>
                  <el-table-column prop="illegal" label="状态">
                    <template slot-scope="scope">
                      <!-- 0：违章，1：未处理，2：视频缺失，3：正常，4：记录，5：提醒, 6: 其他 -->
                      {{
                        scope.row.illegal == '4' ? '记录' : scope.row.illegal == '3' ? '正常' : scope.row.illegal == '2' ? '视频缺失' : scope.row.illegal == '1' ? '未处理' : scope.row.illegal == '5' ? '提醒' : scope.row.illegal == '6' ? '其他' : '违章'
                      }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="form" element-loading-background="rgba(0, 0, 0, 0.7)"
                   element-loading-spinner="el-icon-loading" element-loading-text="拼命加载中..."
                   v-loading="idx.loading">
                <idx-form ref="idxCurrent" :startT="startT" :progressValue="progressValue"
                          :form="idxCurrentList" v-if="idxCurrentList&&idxCurrentList.encode4"/>
              </div>
            </el-col>
          </el-row>
        </div>
      </IdxLayout>
      <comment title="分析意见" :idxCurrentList="idxCurrentList" :visible.sync="isComment" :idx-detail="idxList"
               :duration="duration" :startT="startT"
               :progressValue="progressValue" @clickIdxChart="clickIdxChart" @clickIdxChartChange="clickIdxChartChange"
               v-if="Object.keys(idxList).length>0" :load-analysis-form="loadAnalysisForm" :phases="currentPhases"
               :currentVideos="currentVideos" :base64pic="base64pic" @submit="submitComments" :baseURL="baseURL"/>
    </div>
    <canvas ref="canvas" style="display: none;"></canvas>
    <!--点击对钩后确认保存-->
    <el-dialog v-model="confirmDialog" width="40%" :closeOnClickModal="false" title="提示">
      <h3 style="display:flex;justify-content:start;font-size: 18px;">
        <i class="el-icon-warning" style="margin-top: 16px;margin-right: 18px;"></i>
        请确认是否保存截图!
      </h3>
      <template #footer class="dialog-footer">
        <el-button @click="confirmDialog=false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdataName">确 定</el-button>
      </template>
    </el-dialog>
    <video controls autoplay playsinline ref="videoDis" width="400" height="300"
           style="display: none;opacity: 0;"></video>
  </div>
</template>
<script>
import IdxForm from './detail/index.vue'
import convert from '@/utils/convert'
import LkjItemTable from './detail/LkjItemTable.vue'
import IdxLayout from './detail/idx/index.vue'
import VideoBox from './detail/VideoPlayer/VideoBox.vue'
import IdxChart from './detail/IdxChart/charts.vue'
import Comment from './Comment.vue'
import html2canvas from 'html2canvas';
import axios from 'axios';
import ScreenShot from "js-web-screen-shot";
import luzhi from './luzhi.js';

export default {
  name: 'IdxVideo',
  mixins: [luzhi],
  components: {
    IdxForm,
    LkjItemTable,
    VideoBox,
    IdxChart,
    IdxLayout,
    Comment
  },
  data() {
    return {
      baseUrl: '',
      currentPlayStatus: false,
      videoPlayStartTime: new Date('00:00:00'),
      recordId: '',
      id: '',
      videoList: [],
      loading: false,
      idx: {
        loading: false,
      },
      video: {
        loading: false
      },
      image: {
        loading: false
      },
      openWholeRecord: false,
      layoutType: '',
      analysisPhases: {
        loading: false
      },
      analysisIdx: {
        loading: false
      },
      currentPhaseList: [],
      currentIdx: this.idxItems[this.currentIdxIndex] || {},
      LkjPhaseState: {
        UNTREATED: 0,
        COMPLETED: 1,
        LOSE: 2,
        PROCESSING: 3
      },
      lkjPhaseStateMap: {
        [0]: '未处理',
        [1]: '已完成',
        [2]: '视频缺失',
        [3]: '正在处理'
      },
      api: null,
      isPlaying: false,
      videoStartTime: '',
      originVideoStartTime: '',
      originVideoEndTime: '',
      volume: 0,
      volumeValue: 0,
      analysisPhaseList: '',
      currentIdxDetail: {},
      currentVideos: [],
      storageArray: [], //暂存数组
      pageNum: 1,
      pageSize: 50,
      total: 0,
      preload: true,
      showScreenshot: false,
      asyncPlay: true,
      play: false,
      playBtn: true,
      layouts: [1, 2, 4, 8, 16],
      layoutIndex: 0,
      playbackRateOptions: [0.1, 0.2, 0.5, 0.8, 1.0, 1.2, 1.5, 2.0, 3.0, 5.0, 8.0, 10, 12], // 播放速率选择列表
      limitSpeeds: [],
      startTime: '',
      idxList: {},
      idxCurrentList: {},
      startT: '',
      endT: '',
      progressValue: 0,
      duration: 0,
      currentSencond: '',
      count1: 0,
      count: 0,
      currentTimes: 0,
      lkjCharts: [],
      lkjitems: {},
      lkjloading: false,
      captureTime: '',
      captureImage: '',
      phaseId: '',
      currentLoadIndex: '', //防止重复调用
      currentPhases: [],
      isComment: false,
      idxDetail: {},
      base64pic: '',
      isCircular: false,
      hour: 0,
      minute: 0,
      second: 0,
      initTime: Date.now(),
      timeTotal: 0,
      time: "00:00:00",
      flag: null,
      capturedFrame: null,
      context: null,
      transcribeStr: '录像',
      isRecorder: false,
      canvas: null,
      logStartTime: 0,
      logEndTime: 0,
      baseURL: '',
      eventItem: '',
      isChange: false,
      username: '',
      user_id: '',
      confirmDialog: false,
      isImgLoding: false,
      recorder1: null,
      isRecording: false,
      playbackRateIndex: 4,
      playbackRateOptions: [0.2, 0.5, 0.8, 1.0, 1.2, 1.5, 2.0, 3.0, 5.0, 8.0, 10, 15, 20]
    }
  },
  computed: {
    playbackRate: {
      get() {
        return this.playbackRateOptions[this.playbackRateIndex]
      },
    }
  },
  created() {
    this.id = this.$route.query.id ? this.$route.query.id : ''
    this.recordId = this.$route.query.recordId ? this.$route.query.recordId : ''
    this.phaseId = this.$route.query.phaseId ? this.$route.query.phaseId : ''
    this.startTime = this.$route.query.startTime ? this.$route.query.startTime : ''
    this.user_id = this.$route.query.user_id ? this.$route.query.user_id : ''
    this.username = this.$route.query.username ? this.$route.query.username : ''
    // 22968801
    this.layoutType = this.openWholeRecord ? 1 : 0,
        this.$nextTick(() => {
          this.init()
          this.getLog()
          this.getLogItem()
          this.getBaseUrl()
        })
  },
  mounted() {
  },
  methods: {
    changePlaybackRateIndex(value) {
      const result = this.playbackRateIndex + value
      if (result < 0 || result >= this.playbackRateOptions.length) return
      this.playbackRateIndex = result
      this.$refs.video && this.$refs.video.forEach((item, index) => {
        item.playbackRate = this.playbackRateIndex; // 每次调用的播放速率
      })
    },
    getBaseUrl() {
      axios.get('/api/index/quest_url').then(res => {
        this.baseURL = res.data.data
      })
    },
    submitComments() {
    },
    loadAnalysisForm() {
    },
    openComments() {
      this.isComment = true
      this.$nextTick(
          // async() => {
          // const base64pic = this.$refs.video.getSnapshoot()
          // this.base64pic = base64pic
          // }
      )
    },
    // 录制
    transcribe() {
      if (this.layoutIndex != 0) return this.$message({
        message: '双击选择一个视频进行截取',
        type: 'warning'
      })
      this.isRecorder = !this.isRecorder;
      if (this.isRecorder) {
        this.transcribeStr = "结 束";
        if (!this.canvas) this.canvas = document.createElement("canvas");
        this.recorder1 = this.$recordRTC(this.canvas, {
          type: "canvas"
        });
        this.recorder1.startRecording();
        //记录截取的开始时间
        this.logStartTime = this.strainer(convert.toDate(this.startTime).getTime() + this.progressValue)
        this.drawMedia();
      } else {
        //记录截取的结束时间
        this.logEndTime = this.strainer(convert.toDate(this.startTime).getTime() + this.progressValue)
        this.transcribeStr = "录 像";
        this.recorder1.stopRecording(() => {
          const url = window.URL.createObjectURL(this.recorder1.getBlob());
          this.downloadFile(url, "mp4");
          cancelAnimationFrame(this.animationFrame);
          this.canvas = null;
          this.animationFrame = null;
          this.cutLog('截视频')
        });
      }
    },
    getInitStream(source) {
      return new Promise((resolve, _reject) => {
        // 获取指定窗口的媒体流
        // 此处遵循的是webRTC的接口类型  暂时TS类型没有支持  只能断言成any
        (navigator.mediaDevices).getUserMedia({
          audio: false,
          video: {
            mandatory: {
              chromeMediaSource: 'desktop',
              chromeMediaSourceId: source.id
            },
          }
        }).then((stream) => {
          resolve(stream);
        }).catch((error) => {
          console.log(error);
          resolve(null);
        })
      });
    },
    screenshotHandle() {
      const screenShotHandler = new ScreenShot({
        enableWebRtc: true,
        wrcWindowMode: true,
        // screenFlow: stream, // 传入屏幕流数据
        level: 9999, //层级级别
        completeCallback: this.callback,
        closeCallback: this.closeFn //取消回调
      });
      this.logStartTime = this.strainer(convert.toDate(this.startTime).getTime() + this.progressValue)
      this.cutLog('截图')
    },
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;
      let uInt8Array = new Uint8Array(rawLength);
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], {
        type: contentType
      });
    },
    closeFn(base64) {
      console.log(base64)
      //  this.isImgLoding = false
    },
    convertImageToCanvas(image) {
      var canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      canvas.getContext('2d').drawImage(image, 0, 0)
      return canvas
    },
    callback(base64data) {
      console.log('val', base64data)

      var image = new Image()
      image.src = base64data.base64
      let link = document.createElement('a');
      link.href = image.src;
      link.download = 'screenshot.png';
      link.click();
      this.confirmDialog = true
    },
    confirmUpdataName() {
      this.confirmDialog = false
    },
    // callback(base64data){
    //   var image = new Image()
    //   image.src = base64data.base64
    //   // console.log('base64data',base64data.base64)
    //   image.onload = () => {
    //     var canvas = this.convertImageToCanvas(image)
    //     var url = canvas.toDataURL('image/jpeg') // base64编码的图片
    //     console.log('url**********',url)
    //     // 通过atob将base64进行编码
    //     var bytes = window.atob(url.split(',')[1])
    //     // 处理异常，将ASCII码小于0的转换为大于0,进行二进制转换
    //     var buffer = new ArrayBuffer(bytes.length)
    //     // 生成一个8位数的数组
    //     var uint = new Uint8Array(buffer)
    //     for (var j = 0; j < bytes.length; j++) {
    //       uint[j] = bytes.charCodeAt(j)// 根据长度返回相对应的Unicode 编码
    //     }
    //     // Blob对象  // type 为图片的格式
    //     var imageFile = new Blob([buffer], { type: 'image/jpeg' })
    //     const formData = new FormData()
    //     // 上传的参数名是file，数据是该图片的blob对象，文件名是当前时间戳.jpeg；
    //     //如果不指定第三个参数文件名，那么默认文件名就是blob，没有后缀，后端的上传接口如果要截取文件名的话会出问题
    //     formData.append('file', imageFile, Date.now() + '.jpeg')
    //     // 我这儿是上传到某个地方了，上传地址是在data中定义的uploadRequestUrl
    //     console.log('formData**********',formData)
    //   }
    // },
    // 截取记录
    cutLog(value) {
      let data = {
        cabNum: this.idxCurrentList.encode5,
        name: value,
        date: this.idxCurrentList.encode4,
        driverName: this.idxCurrentList.encodeSj,
        driverNum: this.idxCurrentList.encode11,
        endTime: this.logEndTim,
        idxId: this.id,
        recordId: this.recordId,
        startTime: this.logStartTime,
        trainNum: this.idxCurrentList.encode8 + this.idxCurrentList.encode9,
        userId: this.username || "2",
        username: this.username || "admin"
      }
      axios.post(`${this.baseURL}api/idx/cutLog`, data).then(res => {
        if (res.data.code == 1) {
          // console.log('截取记录:',res)
          this.$message({
            message: '截取成功',
            type: 'success'
          })
        }
      })
    },

    // 3秒倒计时
    countdownFun3() {
      this.interval = setInterval(() => {
        this.captchaTime = this.captchaTime - 1;
        if (this.captchaTime === 0) {
          clearInterval(this.interval);
          this.btnDisabled = false;
          this.captchaTime = this.fixedSecond2;
          this.updateImgTip = false;
        }
      }, 1000);
    },
    // 全程记录的曲线图的点击
    allLogChart(value) {
      this.progressValue = this.getTimestamp(value) - Number(this.getTimestamp(this.startT))
      // console.log('全程记录:',this.progressValue)
      this.getVideoDate();
    },
    cellDblclick(row) {
      console.log('cellDblclick******', row)
      let t = row.time.split(' ')[1]
      this.progressValue = Number(this.getTimestamp(t)) - Number(this.getTimestamp(this.startT))
      this.inputProgress(this.progressValue)
    },
    handleSizeChange(queryParams) {
      this.lkjCharts = []
      this.pageNum = queryParams.pageNum
      this.pageSize = queryParams.pageSize
      this.getLog()
    },
    handleCurrentChange(queryParams) {
      this.lkjCharts = []
      this.pageNum = queryParams.pageNum
      this.pageSize = queryParams.pageSize
      this.getLog()
    },
    handleNextName(eventItem) {
      this.eventItem = eventItem
      this.pageNum = 1
      this.lkjCharts = []
      this.getLog()
    },
    getLog() {
      this.lkjloading = true
      axios.get(
          `http://localhost/test_api/api/lkj/index/getLkjList?recordId=D3792BD24CBB5B2CB844FB349514CA52&pageNum=${this.pageNum}&pageSize=${this.pageSize}&eventItem=${this.eventItem}`
      ).then(res => {
        // axios.get(`/api/ApiData/index?url=api/lkj/index/getLkjList&method=GET&recordId=${this.recordId}&pageNum=${this.pageNum}&pageSize=${this.pageSize}&eventItem=${this.eventItem}`).then(res => {
        this.lkjCharts = res.data.data.rows
        this.total = res.data.data.total
        this.lkjloading = false
      })
    },
    getLogItem() {
      // axios.get(`/api/ApiData/index?url=api/lkj/index/getLkjItem&method=GET&recordId=D3792BD24CBB5B2CB844FB349514CA52`).then(res => {
      axios.get(`/api/ApiData/index?url=api/lkj/index/getLkjItem&method=GET&recordId=${this.recordId}`).then(
          res => {
            this.lkjitems = res.data.data
          })
    },
    videoUrlMesOSS(url, specification) {
      let specArr = specification.split('*')
      let [w, h] = specArr.length > 1 ? specArr : [...specArr, parseInt(+specArr[0] / 16 * 9)]
      return `${url}?spm=a2c4g.11186623.2.1.yjOb8V&x-oss-process=video/snapshot,t_7000,f_jpg,w_${w},h_${h},m_fast`
    },
    stopVideo() {
      this.isCircular = false
      clearInterval(this.flag);
      sessionStorage.removeItem('InitDate')
      this.time = "00:00:00"
      this.$message({
        message: '截取成功',
        type: 'success'
      })
    },
    // 刷新canvas
    drawMedia() {
      const ctx = this.canvas.getContext("2d");
      // 找到需要截图的video标签
      const video = this.$refs.video[0];
      this.canvas.setAttribute("width", video.videoWidth);
      this.canvas.setAttribute("height", video.videoHeight);
      ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
      // requestAnimationFrame 根据电脑显示帧数进行循环
      this.animationFrame = requestAnimationFrame(() => this.drawMedia());
    },
    // 下载
    downloadFile: function (blob, fileType) {
      const a = document.createElement("a");
      a.style.display = "none";
      a.href = blob;
      const time = new Date().getTime();
      a.download = `${time}.${fileType}`;
      document.body.appendChild(a);
      a.click();
      setTimeout(function () {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(blob);
      }, 1000);
    },
    //记录当前时间至session并计算出时间差值也就是计时的时间
    Initime() {
      if (sessionStorage.getItem('InitDate') == null) {
        sessionStorage.setItem('InitDate', Date.now())
      }
      this.timeTotal = Date.now() - sessionStorage.getItem('InitDate');
      const baseTime = Math.round(this.timeTotal / 1000);
      const second = baseTime % 60;
      this.second = second;
      const minute = Math.floor((baseTime / 60) % 60);
      this.minute = minute;
      const hour = Math.floor((baseTime / (60 * 60)) % 60);
      this.hour = hour;
    },
    //计时器计时开始
    start() {
      this.Initime();
      this.flag = setInterval(() => {
        this.second = this.second + 1;
        if (this.second >= 60) {
          this.second = 0;
          this.minute = this.minute + 1;
        }

        if (this.minute >= 60) {
          this.minute = 0;
          this.hour = this.hour + 1;
        }
        this.time =
            this.complZero(this.hour) +
            ":" +
            this.complZero(this.minute) +
            ":" +
            this.complZero(this.second);
      }, 1000);
    },
    //格式化计时时间00:00:00
    complZero(n) {
      return n < 10 ? "0" + n : "" + n;
    },
    loadstart(e) {
      this.$refs.video && this.$refs.video.forEach((item, index) => {
        document.getElementById(`errorMessage${index}`).style.display = 'none';
        document.getElementById(`myVideo${index}`).style.display = 'block';
        this.playBtn = true
        item.addEventListener('error', function () {
          // 当错误发生时，这里的代码会被执行
          if (this.currentLoadIndex != index) { //防止重复调用
            this.currentLoadIndex = index
            this.playBtn = false
            item.pause()
            // 这里可以执行其他逻辑，比如显示一个错误消息给用户
            // 显示错误信息，隐藏视频
            document.getElementById(`errorMessage${index}`).style.display = 'block';
            document.getElementById(`myVideo${index}`).style.display = 'none';
          }
        });
      })
    },
    setLoading(value) {
      if (!this.currentVideos.length > 0) return
      this.loading = value
      if (value) {
        window.clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          // 加载超时后将loading值置为false
          this.loading = false
        }, 30000)
      } else {
        window.clearTimeout(this.timer)
      }
    },
    ended(e) {
      this.getVideoDate();
    },

    // 结束视频和折线图时间切换的的数据处理
    getVideoDate() {
      // console.log('结束视频:',this.progressValue)
      this.video.loading = true
      this.loading = true
      this.currentVideos = []
      this.storageArray = []
      let value = Number(this.getTimestamp(this.startT)) + this.progressValue
      var fifteenMinutesLater = value + 15 * 60 * 1000;
      this.currentTimes = this.progressValue
      this.playBtn = false
      this.videoList.forEach((item, index) => {
        if (item.timestamp > value && item.timestamp < fifteenMinutesLater) {
          this.currentVideos.push(item)
          this.storageArray.push(item)
          this.loading = false
          this.video.loading = false
        }
      })
      if (this.currentVideos.length) {
        this.checkNumberRange(this.currentVideos.length)
      }
      this.$refs.video && this.$refs.video.forEach((item, index) => {
        if (this.currentVideos.length > 0) {
          item.load()
          this.playBtn = true
          document.getElementById(`errorMessage${index}`).style.display = 'none';
          document.getElementById(`myVideo${index}`).style.display = 'block';
        }
        item.addEventListener('error', function () {
          // 当错误发生时，这里的代码会被执行
          this.loading = false
          this.playBtn = false
          item.pause()
          // 这里可以执行其他逻辑，比如显示一个错误消息给用户
          // 显示错误信息，隐藏视频
          document.getElementById(`myVideo${index}`).style.display = 'none';
          document.getElementById(`errorMessage${index}`).style.display = 'block';
        });
      })

    },
    // 项点table被点击
    pointCellDblclick(row) {
      let strs = row.startTime.split(' ')[1]
      this.progressValue = this.getTimestamp(strs) - Number(this.getTimestamp(this.startT))
      // console.log('项点table被点击:',this.progressValue)
      this.getVideoDate();
      this.idxList = {}
      this.startTime = this.strainer(this.currentVideos[0].times)
      this.getQuxXian()
    },
    timeupdate(e) {
      // 当目前的播放位置已更改时
      const currentTime = e.target.currentTime
      this.count = Math.floor(e.target.currentTime)
      if (this.count !== this.count1) {
        this.count1 = this.count
        let current = this.count
        let startT = this.startT.split(':')
        let seconds = startT[2] * 1
        let minutes = startT[1] * 1
        let hour = startT[0] * 1
        seconds += 1
        if (seconds > 59) {
          seconds = '00'
          minutes += 1
        }
        if (minutes > 59) {
          minutes = '00'
          hour += 1
        }
        if (hour > 23) {
          hour = '00'
        }
        this.captureTime = current
        // 控制滚动条回弹
        if (!this.isChange) {
          this.progressValue = this.currentTimes + (current *
              1000) // this.currentTimes = hour + ':' + minutes + ':' + seconds
        } else {
          this.progressValue = this.progressValue
        }
        let num = (convert.toDate(this.startTime).getTime()) + this.progressValue
        Object.values(this.idxList).forEach(item => {
          if ((convert.toDate(item.encode4).getTime()) == num) {
            this.idxCurrentList = item
          }
        })
      }
    },
    pause(e) {
      // console.log(e + '：视频已暂停')
    },
    tableRowClassName2({
                         row,
                         rowIndex
                       }) {
      if (row.illegal === 0) {
        return 'red-row';
      } else if (row.illegal === 2) {
        return 'yellow-row';
      }
    },
    // 点击放大
    enlargeClick(index) {
      this.currentVideos = []
      this.layoutIndex = 0
      this.currentVideos.push(this.storageArray[index])
    },
    // 控制滚动条回弹
    inputProgress3(val) {
      // console.log('进来3',val)
    },
    // 控制滚动条回弹
    inputProgress2(val) {
      let str1;
      if (val != str1) {
        str1 = val
        this.$refs.video.forEach(item => {
          item.pause()
          this.playBtn = false
          // console.log('进来1',val)
        })
      }
    },
    inputProgress(val, value2) {
      // console.log('***********************', val, value2)
      var that = this
      var timer = null
      // console.log('拖动滚动条:',this.progressValue,val)
      that.isChange = true
      that.count = val
      clearTimeout(timer);
      timer = setTimeout(function () {
        let value
        if (val || val == 0) {
          value = Number(that.getTimestamp(that.startT)) + val
          that.currentTimes = val
        } else {
          value = value2
          that.currentTimes = value2 - Number(that.getTimestamp(that.startT))
          that.progressValue = that.currentTimes
        }
        var fifteenMinutesLater = value + 15 * 60 * 1000;
        that.currentVideos = []
        that.storageArray = []
        that.videoList.forEach(item => {
          if (item.timestamp > value && item.timestamp < fifteenMinutesLater) {
            that.currentVideos.push(item)
            that.storageArray.push(item)
          }
        })
        that.checkNumberRange(that.currentVideos.length)
        that.idxList = {}
        if (that.currentVideos.length > 0) {
          console.log('inputProgress:that.currentVideos', that.currentVideos)
          that.startTime = that.strainer(that.currentVideos[0].times)
          let strs = that.startTime.split(' ')[1]
          that.progressValue = that.getTimestamp(strs) - Number(that.getTimestamp(that.startT))
          console.log('1196', strs, that.startT, that.progressValue)
        }
        that.$refs.video.forEach((item, index) => {
          item.load()
          that.playBtn = true
          that.isChange = false
          item.addEventListener('error', function () {
            that.loading = false
            item.pause()
            document.getElementById(`errorMessage${index}`).style.display =
                'block';
            document.getElementById(`myVideo${index}`).style.display = 'none';
          });
        })
        that.getQuxXian()

        console.log('inputProgress2', that.isChange)

      }, 3000);

    },
    formatTooltip(val) {
      let value = Number(this.getTimestamp(this.startT)) + val
      return this.strainer(value, 'HH:mm:ss')
    },
    // 获取曲线图
    getQuxXian() {
      this.idx.loading = true
      let times = new Date(this.startTime).getTime();
      axios.get(
          `/api/ApiData/index?url=api/idx/index/getEncode&method=GET&recordId=${this.recordId}&id=${this.id}&startTime=${times}`
      ).then(res => {
        Object.values(res.data.data).forEach(item => {
          item.filePath = this.lkjitems.filePath
        })
        this.idxList = res.data.data
        this.idx.loading = false
        this.idxCurrentList = Object.values(this.idxList)[0]
      })
    },
    changePlay() {
      if (!this.playBtn) {
        this.$refs.video.forEach(item => {
          item.volume = 0
          item.play()
        })
        this.playBtn = true
      } else {
        this.$refs.video.forEach(item => {
          item.volume = 0
          item.pause()
        })
        this.playBtn = false
      }
    },
    // 改变播放盒子数量
    changeLayout(index) {
      this.loading = true
      this.currentVideos = []
      this.currentVideos = this.storageArray
      // 判断是否有新增的视频盒子，有则需要重新设置当前播放时间以达到同步播放
      if (index > this.layoutIndex && this.layouts[index] > this.storageArray.length) {
        let num = this.layouts[index] - this.currentVideos.length
        for (var i = 0; i < num; i++) {
          this.currentVideos.push({
            cabNum: "",
            channelName: "",
            channelNum: "",
            createTime: "",
            factoryName: "",
            id: '',
            prefixDate: "",
            recordId: "",
            size: '',
            suffixDate: "",
            url: "",
            videoUrl: ""
          })
        }
      } else if (index < this.layoutIndex && this.layouts[index] < this.storageArray.length) {
        let disNum = this.currentVideos.length - (this.currentVideos.length - this.layouts[index])
        this.currentVideos = this.currentVideos.slice(0, disNum)
      } else if (index > this.layoutIndex && this.layouts[index] < this.storageArray.length) {
        let num2 = this.storageArray.length - (this.storageArray.length - this.layouts[index])
        this.currentVideos = this.currentVideos.slice(0, num2)
      }
      this.layoutIndex = index
      this.$refs.video && this.$refs.video.forEach((item, index) => {
        item.load()
        this.playBtn = true
        item.addEventListener('error', function () {
          // 当错误发生时，这里的代码会被执行
          this.playBtn = false
          item.pause()
          // 这里可以执行其他逻辑，比如显示一个错误消息给用户
          // 显示错误信息，隐藏视频
          document.getElementById(`errorMessage${index}`).style.display = 'block';
          document.getElementById(`myVideo${index}`).style.display = 'none';
        });
      })
      this.loading = false
    },
    initPlaybackRateIndex() {
      this.playbackRateIndex = 4
      this.$refs.video && this.$refs.video.forEach((item, index) => {
        item.playbackRate = this.playbackRateIndex; // 每次调用的播放速率
      })
    },
    // 改变音量
    changeVolume(value) {
      this.$refs.video.forEach(item => {
        item.volume = value / 100
      })
    },
    playVideo() {
      return this.play && !(this.asyncPlay ? this.asyncLoading : false)
    },
    init() {
      axios.get(`/api/ApiData/index?url=api/idx/phase/list&method=GET&recordId=${this.recordId}`).then(res => {
        if (this.startTime) {
          res.data.data.forEach((item, index) => {
            item.time = this.strainer(item.startTime, 'HH:mm:ss') + '-' + this.strainer(
                item.endTime, 'HH:mm:ss')
            if (this.phaseId == item.id && convert.toDate(this.startTime).getTime() ==
                convert.toDate(item.startTime).getTime()) {
              this.$refs.selectPhase.setCurrentRow(item) //设置项点选中行
            }
          })
        } else {
          res.data.data.forEach((item, index) => {
            item.time = this.strainer(item.startTime, 'HH:mm:ss') + '-' + this.strainer(
                item.endTime, 'HH:mm:ss')
            if (this.phaseId == item.id) {
              this.startTime = item.startTime
              this.$refs.selectPhase.setCurrentRow(item) //设置项点选中行
            }
          })
        }
        this.currentPhaseList = res.data.data
        //求意见提交的项点数组
        let value = Number(this.getTimestamp(this.startT)) + this.progressValue
        var fifteenMinutesLater = value + 15 * 60 * 1000;
        const index = this.currentPhaseList.findIndex((phase) => {
          return (convert.toDate(phase.startTime).getTime()) >= value || (convert.toDate(
              phase.endTime).getTime()) < fifteenMinutesLater
        })
        this.currentPhases.push(this.currentPhaseList[index])
        this.getVideo()
      })
    },
    strainer(value, type) {
      const dt = new Date(value)
      // 返回年数的四位数方法
      const y = dt.getFullYear()
      // 月份从0开始，所有要加1，如果不足两位用es6字符串方法补0
      const m = (dt.getMonth() + 1 + '').padStart(2, '0')
      const d = (dt.getDate() + '').padStart(2, '0')

      const hh = (dt.getHours() + '').padStart(2, '0')
      const mm = (dt.getMinutes() + '').padStart(2, '0')
      const ss = (dt.getSeconds() + '').padStart(2, '0')
      if (type === 'yyyy-MM-dd') {
        return `${y}-${m}-${d}`
      } else if (type === 'hh:mm') {
        return `${hh}:${mm}`
      } else if (type === 'HH:mm:ss') {
        return `${hh}:${mm}:${ss}`
      } else if (type === 'yyyy年MM月') {
        return `${y}年${m}月`
      } else {
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
      }
    },
    idxItems() {
      return this.analysisIdx.records
    },
    lkjPhaseStatus() {
      const keys = Object.keys(this.lkjPhaseStateMap)
      keys.sort((a, b) => {
        return a.length - b.length
      })
      const result = keys.map((key) => {
        return {
          value: ~~key,
          text: this.lkjPhaseStateMap[key]
        }
      })
      return result
    },
    lkjPhaseStatus() {
      const list = DictModule.lkjPhaseStatus.filter((l) => l.value !== LkjPhaseState.LOSE)
      return list
    },
    currentIdxIndex() {
      const index = this.idxItems.findIndex((item) => convert.toDate(item.platformTime).getTime() > this
          .playedTime)
      if (index > -1) {
        return index === 0 ? index : index - 1
      }
      return this.idxItems.length - 1
    },
    getVideo() {
      this.loading = true
      axios.get(
          `/api/ApiData/index?url=api/idx/mp4/getMp4ByRecordId&method=GET&recordId=${this.recordId}&id=${this.id}`
      ).then(res => {
        res.data.data.forEach(item => {
          item.fileTime = item.prefixDate + ' ' + this.getSeconds(item.suffixDate)
          item.times = this.getData(item.prefixDate) + ' ' + this.getSeconds(item.suffixDate)
          item.timestamp = Number(this.getTimestamp(this.getSeconds(item.suffixDate)))
        })
        this.videoList = res.data.data
        this.startT = this.getSeconds(res.data.data[0].suffixDate)
        this.endT = this.getSeconds(res.data.data[res.data.data.length - 1].suffixDate)
        let time1 = this.getData(res.data.data[0].prefixDate) + ' ' + this.getSeconds(res.data.data[0]
            .suffixDate)
        let time2 = this.getData(res.data.data[res.data.data.length - 1].prefixDate) + ' ' + this
            .getSeconds(res.data.data[res.data.data.length - 1].suffixDate)
        this.duration = Number(this.getDatastamp(time2)) - Number(this.getDatastamp(time1))

        if (this.startTime) {
          let strs = this.startTime.split(' ')[1]
          this.progressValue = this.getTimestamp(strs) - Number(this.getTimestamp(this.startT))
          console.log('getVideo', this.progressValue)
          this.getVideoDate();
        } else {
          this.videoList.forEach(item => {
            if (res.data.data[0].suffixDate == item.suffixDate) {
              this.currentVideos.push(item)
              this.storageArray.push(item)
              this.loading = false
            }
          })
          this.startTime = this.startTime ? this.startTime : res.data.data[0].times
          //计算展示视频的几宫格
          if (this.currentVideos.length) {
            this.checkNumberRange(this.currentVideos.length)
          }
        }
        this.getQuxXian()
        this.playedTime = convert.toDate(res.data.data[0].fileTime).getTime()
      })
    },
    getDatastamp(val) {
      return Math.floor(new Date(val).getTime());
    },
    getTimestamp(val) {
      var timeString = val; // 时分秒字符串
      var currentDate = new Date(); // 当前日期对象
      var dateString = currentDate.toDateString(); // 获取当前日期的字符串表示（不包含时分秒）
      var dateTimeString = dateString + ' ' + timeString; // 拼接日期和时分秒字符串
      var timestamp = Date.parse(dateTimeString); // 将日期时间字符串转换为时间戳
      return timestamp
    },
    //计算展示视频的几宫格
    checkNumberRange(num) {
      if (num == 1) {
        this.layoutIndex = 0
      } else if (num == 2) {
        this.layoutIndex = 1
      } else if (num > 2 && num <= 4) {
        this.layoutIndex = 2
      } else if (num > 4 && num <= 8) {
        this.layoutIndex = 3
      } else {
        this.layoutIndex = 4
      }
    },
    changePlayCurrentTime(value) {
      this.playedTime = value
    },
    getSeconds(value) {
      if (value) {
        let arr = Array.from(value);
        arr = arr.map((item, index) => {
          if (index == 1) {
            item = item + ':'
          }
          if (index == 3) {
            item = item + ':'
          }
          return item
        })
        return arr.join('')
      }
    },
    getData(value) {
      if (value) {
        let arr = Array.from(value);
        arr = arr.map((item, index) => {
          if (index == 3) {
            item = item + '-'
          }
          if (index == 5) {
            item = item + '-'
          }
          return item
        })
        return arr.join('')
      }
    },
    // 图表初始化
    clickIdxChart(index) {
      // console.log('index',index)
      this.idxList = {}
      this.startTime = index
      this.progressValue = this.getTimestamp(index.split(' ')[1]) - Number(this.getTimestamp(this.startT))
      // console.log('this.progressValue:',this.progressValue)
      this.getVideoDate();
      this.getQuxXian()
    },
    // 图表项点点击
    clickIdxChartChange(times) {
      this.currentSencond = this.getTimestamp(times)
      this.idxCurrentList = {}
      this.idxCurrentList.encode4 = ''
    },
    // 改变当前播放时间（单位：秒）
    changeCurrentTime(value) {
      this.changePlayCurrentTime(this.videoStartTimestamp + value * 1000)
    },
    // mp4选择
    changeMp4(row) {
      this.video.loading = true
      this.loading = true
      this.currentVideos = []
      this.storageArray = []
      let str = row.fileTime && row.fileTime.split(' ')[1]
      if (row) {
        this.startTime = convert.timeToSeconds(str)
        // 设置视频开始时间
        this.changePlayCurrentTime(convert.toDate(row.fileTime).getTime())
        this.videoList.forEach(item => {
          if (row.suffixDate == item.suffixDate) {
            this.currentVideos.push(item)
            this.storageArray.push(item)
          }
        })
        this.progressValue = Number(this.getTimestamp(this.getSeconds(row.suffixDate))) - Number(this
            .getTimestamp(this.startT))
        this.currentTimes = this.progressValue
        // console.log('changeMp4:',this.progressValue)
        this.loading = false
        this.video.loading = false
        this.idxList = {}
        this.startTime = this.strainer(this.currentVideos[0].times)
        this.getQuxXian()
      }
    },
    videoScrollTop() {
      let value = Number(this.getTimestamp(this.startT)) + this.progressValue
      var fifteenMinutesLater = value + 15 * 60 * 1000;
      const index = this.videoList.findIndex((obj) => obj.timestamp > value && obj.timestamp <
          fifteenMinutesLater)
      const index2 = this.currentPhaseList.findIndex((obj) => obj.time > value && obj.time < fifteenMinutesLater)
      if (index >= 0) {
        this.$nextTick(() => {
          const scrollTop = (index / this.videoList.length) * (this.$refs.selectMp4).bodyWrapper
              .scrollHeight
          this.$refs.selectMp4.bodyWrapper.scrollTop = scrollTop
        })
      }
    },
    allLog(value) {
      this.openWholeRecord = !value
    },
    // 对应当前项点改变时将其置顶
    phaseScrollTop() {
      let value = Number(this.getTimestamp(this.startT)) + this.progressValue
      var fifteenMinutesLater = value + 15 * 60 * 1000;
      const index = this.currentPhaseList.findIndex((phase) => {
        return (convert.toDate(phase.startTime).getTime()) >= value || (convert.toDate(phase.endTime)
            .getTime()) < fifteenMinutesLater
      })
      if (index >= 0) {
        const scrollTop = (index / this.currentPhaseList.length) * this.$refs.selectPhase.bodyWrapper
            .scrollHeight
        this.$nextTick(() => {
          this.$refs.selectPhase.bodyWrapper.scrollTop = scrollTop
        })
      }
    },
    // 判断项点选中样式
    phaseRowClassName(item) {
      if (
          this.playedTime >= item.row.startTime &&
          this.playedTime < item.row.endTime
      ) {
        return 'current-row'
      }
      return ''
    },
    // 提交签署意见
    submitComments(form) {
      this.submitAnalysisForm(form.phase, form.data, this.currentIdxDetail)
    },
    // 播放时间格式化
    dateFormat(value) {
      return convert.dateFormat(new Date(value), 'HH:mm:ss')
    },
    defaultPlayStartTime() {
      if (!this.$route.query.startTime) {
        return 0
      }
      const startTime = parseInt(this.$route.query.startTime + '')
      return +(startTime || 0)
    },
    //设置视频选中样式
    tableRowClassName(item) {
      const videos = this.currentVideos
      if (videos) {
        const some = videos.some((video) => video.id === item.row.id)
        if (some) {
          return 'current-row'
        }
      }
      return ''
    }


  },
  activated() {
    this.isPlaying = this.currentPlayStatus
  },
  deactivated() {
    this.currentPlayStatus = this.isPlaying
    this.isPlaying = false
  },
  beforeDestroy() {
    // 页面销毁前暂停视频播放
    this.isPlaying = false
    this.openWholeRecord = false
  },
  watch: {
    'progressValue': {
      handler(newV, OldV) {
        if (newV && newV != OldV) {
          // console.log('progressValue更新:',this.progressValue)
          this.progressValue = newV
          this.videoScrollTop()
          this.phaseScrollTop()
        }
      },
      deep: true
    },
    'idxCurrentList.encode4'(newVal, oldVal) {
      if (!newVal) {
        Object.values(this.idxList).forEach((item, index) => {
          if (this.getTimestamp(item.encode4 && item.encode4.split(' ')[1]) == this.currentSencond) {
            this.idxCurrentList = item
            this.$refs.idxCurrent.videoForm = this.idxCurrentList
          }
        })
      }
    },
    'playedTime'(newVal, oldVal) {
      if (newVal) {
        sessionStorage.setItem('playedTime', newVal + '')
      }
    },
    'videoPlayStartTime'(newVal, oldVal) {
      let val = this.getTimestamp(this.strainer(newVal, 'HH:mm:ss'))
      this.inputProgress(0, val)
    },
    'openWholeRecord': {
      handler(newV, OldV) {
      },
      deep: true
    },
  }
}
</script>
<style scoped>
.videoDetail_box {
  width: 100%;
  height: 1000px;
}

.videoDetail_box .videoDetail {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

.vedio-box {
  height: 100%;
}

.vedio-box .box-content {
  height: 100%;
}

.video-content {
  background: #303133;
  border: 1px solid #ccc;
  height: 100%;
}

.video-content .warning {
  background: rgba(0, 0, 0, 0.8);
  height: 25%;
  padding: 10px 0;
  border: 2px solid #ccc;
}

.video-content .warning_heght {
  height: 49%;
}

.video-content .warning .btn {
  color: white;
  text-align: right;
}

/deep/ .el-switch__label {
  color: white;
}

/deep/ .el-switch__label.is-active {
  color: #00EE00;
}

.video-content .video-main {
  height: 66%;
  width: 100%;
  position: relative;
  padding: 5px;
  padding-right: 0;
  box-sizing: border-box;
}

.video-content .heght4 {
  height: 46%;
}

.video-content .video-main .idxLight {
  position: absolute;
  bottom: 10px;
  right: 10px;
  height: 50px;
  width: 50px;
  border: none;
}

.video-content .video-main .idxLight img {
  width: 100%;
  height: 100%;
}

.content-right {
  background: #d4dff3;
  height: 100%;
}

.content-right .form {
  height: calc(100% - 516px);
  font-size: 12px;
  box-sizing: border-box;
  padding: 2px;
  border: 1px solid #ccc;
}

.content-right .table-two {
  height: 208px;
}

.content-right .table-one {
  height: 308px;
}

.wraper {
  margin: 0px auto;
  position: relative;
  height: 100%;
  overflow: scroll;

}

.wraper .float-btn {
  position: absolute;
  bottom: 50px;
  height: 40px;
  width: 40px;
  right: 10px;
}

.controls {
  height: 40px;
  background: #303133;
  font-size: 14px;
  line-height: 40px;
  padding: 2px 10px;
  color: #fff;
  box-sizing: border-box;
}

.controls .btn {
  padding: 2px 4px;
  margin-right: 4px;
  cursor: pointer;
  max-width: 100px;
}

.controls .btn i {
  font-size: 13px;
}

.controls .theme {
  padding: 2px 4px;
  margin-right: 4px;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #c0c4cc;
  background-color: #ffffff;
  color: #000;
}

.controls .playback-rate {
  padding: 2px;
  margin-right: 7px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 12px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  background-color: rgb(0, 150, 136);
}

.controls .slider {
  width: 100px;
  display: inline-block;
  vertical-align: middle;
}

.controls .screenshot {
  padding: 2px 10px;
  border: 1px solid #ccc;
  background: #fff;
  color: #666;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 10px;
  cursor: pointer;
}

.controls .red {
  background-color: #dd6161;
  color: #fff;
}

.el-icon-menu.active {
  color: #dd6161;
}

::v-deep.el-table .red-row {
  background: #dd6161;
  /* color: #fff; */
}

::v-deep.el-table .yellow-row {
  background: yellow;
  /* color: #fff; */
}

::v-deep .el-table__body tr.current-row > td {
  background: #409EFF !important;
  color: #fff;
}

.error_msg {
  position: relative;
  width: 100%;
  text-align: center;
  color: rgb(204, 204, 204);
  margin: auto;
  height: 100%;
  /* height: 105px; */
  display: flex;
  border: 3px solid rgb(204, 204, 204);
  display: none;
  box-sizing: border-box;
}

.error_msg .icon {
  position: absolute;
  top: 25px;
  left: 50%;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.aspect-ratio-16-9 {
  position: relative;
  /* 或者指定宽度 */
  height: 100%;
  padding-bottom: 56.25%;
  /* 16:9的宽高比 */
}

.aspect-ratio-16-9 .video_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.aspect-ratio-16-9 .video_box .video_item {
  width: 100%;
  height: 100%;
  object-fit: fill;
  width: 100%;
  height: 100%;
}

.aspect-ratio-16-9 .video_box .no_data_item {
  background: #ccc;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border: 1px solid #fff;
}

.controls .circular-dots {
  display: inline-block;
  border-radius: 50%;
  vertical-align: middle;
  text-align: center;
  margin-right: 10px;
  font-size: 30px;
  line-height: 15px;
  color: red;
  font-weight: 700;
}

/* 为了跨浏览器兼容性，可以设置webkit内核浏览器的滚动条样式 */
::v-deep.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar,
.eight_box::-webkit-scrollbar {
  width: 10px;
  /* 设置滚动条的宽度 */
}

/* 滚动条轨道 */
::v-deep.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
  background: #ffffff;
  /* 设置轨道的背景颜色 */
}

.eight_box::-webkit-scrollbar-track {
  background: #303133;
  /* 设置轨道的背景颜色 */
}

/* 滚动条的滑块 */
::v-deep.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb,
.eight_box::-webkit-scrollbar-thumb {
  background: #ccc;
  /* 设置滑块的背景颜色 */
  border-radius: 10px;
}

/* 当滑块悬停或活动时的样式 */
::v-deep.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover .eight_box::-webkit-scrollbar-thumb:hover {
  background: #ccc;
  /* 设置悬停或活动状态时的背景颜色 */
}
</style>